<template>
    <el-card
            style="width: 250px; flex-direction: column;display: flex; position: absolute; right: 0px;margin-top: 3%; margin-right: 3%;align-items: center;">
        <span>航迹点编辑</span>
        <el-select size="small" style="margin-top: 2px; width: 230px;" placeholder="选择航迹点" v-model="pointId">
            <el-option v-for="(item,index) in path" :label="index" :key="index" :value="index"></el-option>
        </el-select>

        <div style="width: 230px; margin-top: 2px;display: flex; flex-direction: row;justify-content: space-between;">
            <span style="font-size: 1.2ch;color: gray;">经度:{{pointData.longitude}}</span>
            <span style="font-size: 1.2ch;color: gray;">纬度:{{pointData.latitude}}</span>
        </div>
        <div
                style="width: 230px; display: flex;flex-direction: row; margin-top: 2px;align-items: center;justify-content: space-between;">
            <span>高度:</span>
            <el-input size="small" style="width: 180px;" v-model="pointData.altitude"
                      :placeholder="pointData.altitude"></el-input>
        </div>
        <div
                style="width: 230px; display: flex;flex-direction: row; margin-top: 2px;align-items: center;justify-content: space-between;">
            <span>速度:</span>
            <el-input size="small" style="width: 180px;" v-model="pointData.speed"
                      :placeholder="pointData.speed"></el-input>
        </div>
        <div>

        </div>
        <el-select size="small" style="width: 230px; margin-top: 2px;" v-model="pointData.type"
                   placeholder="航迹点类型">
            <el-option label="过路点" value=1></el-option>
            <el-option label="悬停点" value=2></el-option>
            <el-option label="降落点" value=3></el-option>
        </el-select>
        <div style="display: flex;flex-direction: row;justify-content: space-around;">
            <el-button type="success" size="mini" style=" margin-top: 2px;" @click="editPoint()">确认</el-button>
        </div>

    </el-card>
</template>

<script>
    export default {
        name: "Route_Card",

        data() {
            return {
                path: [], //路径实例
                pointId: '',
                pointData: {
                    latitude: null,
                    longitude: null,
                    altitude: 100,
                    speed: 10,
                    type: 1
                },

            }
        },

        methods: {
            editPoint() {
                //修改航迹点
                if (this.pointId != null) {
                    let data = this.path;
                    this.path[this.pointId] = this.pointData
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                }
            },

        }
    }
</script>

<style scoped>

</style>
